<script>
import KtTableSaveOfTypeIsEnum from "/src/components/node-kantboot/components/KtTable/InSaveComponents/KtTableSaveOfTypeIsEnum.vue";

export default {
  components: {KtTableSaveOfTypeIsEnum},
  props: {
    column: {
      type: Object,
      default: ''
    },
    value: {
      type: Object,
      default: ''
    },
    /**
     * 用于控制当前行的状态
     * view: 查看状态
     * edit: 编辑状态
     */
    rowStatus: {
      type: String,
      default: 'view'
    },
    /**
     * 是否可以编辑
     */
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valueData: "",
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 对column进行处理
     * @param column 列的配置
     * @returns {*} 返回处理后的列的配置
     */
    newColumn(column) {
      // 如果column.textSetting不存在，就给它赋值一个空对象
      if (!column.setting) {
        column.setting = {}
      }
      return column
    },
    /**
     * 查询枚举值
     */
    findEnumValue(value) {
      try {
        return this.newColumn(this.column).enumList.find(item => item.value === value).label
      } catch (e) {
        return ''
      }
    },
    change(value){
      this.$emit('change', value)
    }
  },
  // 监听value的变化
  watch: {
    value: {
      handler(val) {
        this.valueData = val;
      },
      immediate: true
    },
    rowStatus(val) {
      this.valueData = this.value;
    }
  }
}
</script>

<template>
  <div>
    <div v-if="rowStatus==='view'||!column?.isEdit">
      <span class="pa-span">
          {{ newColumn(column).setting.prefix }}
      </span>
      <span class="text-value">
      {{ findEnumValue(value) }}
    </span>
      <span class="pa-span">
      {{ newColumn(column).setting.suffix }}
    </span>
    </div>

    <div v-if="rowStatus==='edit'&&column?.isEdit">
      <kt-table-save-of-type-is-enum
        :column="column"
        @change="change"
      ></kt-table-save-of-type-is-enum>
    </div>

  </div>
</template>

<style lang="scss" scoped>
@import "../../../index";

.text-value {
  margin: 0 5px 0 5px;
}
</style>